<template>
  <!-- 职位管理 -->
  <div>
    <!-- 搜索容器 -->
    <div class="search-container">
      <!-- 行业输入框 -->
      <span class="search-label">职位类别：</span>
      <el-input v-model="typeName" placeholder="搜索职位类别" class="search-input search-industry" clearable>
      </el-input>

      <!-- 职位输入框 -->
      <span class="search-label">职位：</span>
      <el-input v-model="jobName" placeholder="搜索职位" class="search-input" clearable>
      </el-input>

      <!-- 状态下拉框（仅启用和禁用） -->
      <span class="search-label">状态：</span>
      <el-select v-model="jobStatus" placeholder="请选择状态" class="search-select">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>

      <el-button type="primary" class="search-button" @click="handleSearch">查询</el-button>
      <el-button type="success" class="search-button" @click="handleReset">重置</el-button>
      <el-button type="success" class="search-button">添加职位</el-button>
    </div>

    <el-table :data="tableData" border style="width: 100%; margin-top: 15px;"
      :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
      <!-- 第一列：行业 -->
      <el-table-column prop="jobTypeDO.typeName" label="职位类别"></el-table-column>

      <!-- 第二列：职位 -->
      <el-table-column prop="jobName" label="职位"></el-table-column>

      <!-- 第三列：职位简介 -->
      <el-table-column prop="jobInfo" label="职位简介"></el-table-column>

      <!-- 第四列：状态列 -->
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.jobStatus === 0" type="success">启用</el-tag>
          <el-tag v-else-if="scope.row.jobStatus === 1" type="danger">禁用</el-tag>
        </template>
      </el-table-column>

      <!-- 第五列：职位操作 -->
      <el-table-column label="职位操作" width="260">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="text" size="small">修改职位</el-button>
          <el-button @click="handleDelete(scope.row)" type="text" size="small">删除职位</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination class="pagination-left" background layout="prev, pager, next" :total="1000"></el-pagination>

    <!-- 编辑职位弹窗 -->
    <el-dialog title="编辑职位" :visible.sync="editDialogVisible" width="500px">
      <el-form>
        <el-form-item label="职位类别：" label-width="100px">
          <el-input v-model="editData.typeName"></el-input>
        </el-form-item>

        <el-form-item label="职位：" label-width="100px">
          <el-input v-model="editData.jobName"></el-input>
        </el-form-item>

        <el-form-item label="职位简介：" label-width="100px">
          <el-input v-model="editData.jobInfo" type="textarea" :rows="4"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { selectByJob,updateByJob } from "@/api/job"
export default {
  methods: {
    // 编辑按钮点击
    handleEdit(row) {
      // 复制需要编辑的字段
      this.currentEdit = {
        id: row.id,
        typeName: row.jobTypeDO.typeName,
        jobName: row.jobName,
        jobInfo: row.jobInfo,
        typeId: row.jobTypeDO.id // 添加职位类别ID
      }
      this.editDialogVisible = true
    },

    // 保存编辑
    // saveEdit() {
    //   // 1. 更新本地表格数据
    //   const index = this.tableData.findIndex(item => item.id === this.editData.id)
    //   if (index !== -1) {
    //     // 创建新对象避免引用问题
    //     const newRow = {
    //       ...this.tableData[index],
    //       jobName: this.editData.jobName,
    //       jobInfo: this.editData.jobInfo,
    //       jobTypeDO: {
    //         ...this.tableData[index].jobTypeDO,
    //         typeName: this.editData.typeName
    //       }
    //     }

    //     // 使用$set确保响应式更新
    //     this.$set(this.tableData, index, newRow)
    //   }

    //   // 2. 这里应该调用API保存到后端
    //   console.log('保存编辑后的数据:', this.editData)

    //   // 3. 关闭弹窗
    //   this.editDialogVisible = false
    //   this.$message.success('职位信息已保存')
    // },

    // 保存编辑 (简化版)
    async saveEdit() {
      try {
        // 1. 调用更新API
        const params = {
          id: this.currentEdit.id,
          jobName: this.currentEdit.jobName,
          jobInfo: this.currentEdit.jobInfo,
          jobTypeDO: {
            id: this.currentEdit.typeId,
            typeName: this.currentEdit.typeName
          }
        }
        
        await updateByJob(params)
        
        // 2. 直接更新本地数据 (更简洁的方式)
        const row = this.tableData.find(item => item.id === this.currentEdit.id)
        if (row) {
          row.jobName = this.currentEdit.jobName
          row.jobInfo = this.currentEdit.jobInfo
          row.jobTypeDO.typeName = this.currentEdit.typeName
        }
        
        // 3. 关闭弹窗并提示
        this.editDialogVisible = false
        this.$message.success('职位信息已更新')
      } catch (error) {
        this.$message.error('更新失败：' + (error.message || '请稍后再试'))
      }
    },


    handleDelete(row) {
      console.log('删除', row);
    },

    // 查询按钮点击事件
    handleSearch() {
      // 收集查询条件
      const params = {
        typeName: this.typeName,
        jobName: this.jobName,
        jobStatus: this.jobStatus,
      };

      // 调用加载数据方法并传入条件
      this.loadData(params);
    },

    // 重置按钮点击事件
    handleReset() {
      // 清空所有查询条件
      this.typeName = '';
      this.jobName = '';
      this.jobStatus = '';

      // 重置后重新加载全部数据
      this.loadData({});
    },

    // 加载数据方法（接收查询条件参数）
    async loadData(params) {
      try {
        // 调用后端接口并传递查询条件
        const response = await selectByJob(params);

        console.log("完整响应:", response);

        // 假设接口返回的数据在response.data中
        this.tableData = response.data || [];
      } catch (error) {
        console.error("数据加载失败:", error);
        this.$message.error("加载数据失败，请稍后重试");
      }
    },

  },
  data() {
    return {
      // 编辑弹窗可见性
      editDialogVisible: false,
      currentEdit: { // 更清晰的命名
        id: null,
        typeName: '',
        jobName: '',
        jobInfo: '',
        typeId: null // 添加职位类别ID
      },

      typeName: '',         // 行业搜索输入
      jobName: '',          // 职位搜索输入
      jobInfo: '',
      jobStatus: null,         // 选择的状态（默认空字符串）
      tableData: [],

      // 更新状态选项，启用和禁用
      options: [
        { value: 0, label: '启用' },
        { value: 1, label: '禁用' }
      ],
    }
  },

  created() {
    // 页面初始化时加载数据（默认无查询条件）
    this.loadData({});
  },
}
</script>

<style scoped>
.search-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
}

.search-label {
  white-space: nowrap;
  font-size: 14px;
  color: #606266;
  margin-right: 0;
}

.search-input {
  width: 160px;
  margin-right: 8px;
}

.search-select {
  width: 160px;
  margin-right: 8px;
}

.search-button {
  margin-left: 8px;
}

.el-table th {
  height: 70px !important;
  line-height: 70px !important;
}

.el-table {
  margin-top: 15px;
}

.el-table__header-wrapper th {
  background-color: #f5f7fa;
}

.pagination-left {
  margin-top: 15px;
  text-align: left;
}

.el-table .el-button--text {
  margin: 0 5px;
}
</style>